<template>
  <div class="header">
    <el-header class="container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="text-align: right"
        @select="handleSelect"
      >
        <el-menu-item
          ><img
            class="img-fluid"
            src="../../assets/images/loginLogo.png"
            alt="img"
        /></el-menu-item>
        <el-menu-item index="1">
          <router-link :to="'/userindex'">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link :to="'/CarbonQuery'">碳势趋势图</router-link>
        </el-menu-item>

        <div v-if="!isLogin" class="headerbtnbox">
          <el-button class="login-btn" @click="loginVisible = true"
            >登 录</el-button
          >
          <el-button type="primary" @click="regVisible = true">注 册</el-button>
        </div>

        <div v-else class="headerbtnbox">
          <img src="../../assets/images/user.png" class="userImg" alt="头像" />
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ userDate.name }}<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">
                <router-link :to="'/userCenter'">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item command="2" @click="loginVisible = true"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item command="3">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </el-header>

    <el-dialog title="登 录" :visible.sync="loginVisible" width="600px">
      <el-form ref="loginDto" :model="loginDto" label-width="80px">
        <el-form-item label="账号">
          <el-input
            v-model="loginDto.u_id"
            type="input"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="loginDto.u_pwd"
            type="input"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="loginVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">登 录</el-button>
        <el-button type="primary" @click="$router.push('/index')"
          >管理员界面</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="注册" :visible.sync="regVisible" width="600px">
      <el-form ref="registerParam" :model="registerParam" label-width="120px">
        <el-form-item label="账号">
          <el-input v-model="registerParam.u_id" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="registerParam.u_pwd"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="registerParam.u_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="registerParam.u_sex"
            placeholder="请选择性别"
            style="width: 100%"
          >
            <el-option label="男" value="false" />
            <el-option label="女" value="true" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="registerParam.u_age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="住址">
          <el-input
            v-model="registerParam.u_address"
            placeholder="请输入住址"
          />
        </el-form-item>
        <el-form-item label="单位">
          <el-input
            v-model="registerParam.u_unit"
            placeholder="请输入所在单位"
          />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input
            v-model="registerParam.u_email"
            placeholder="请输入电子邮箱"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="registerParam.u_number"
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item label="节点编号">
          <el-select
            v-model="registerParam.node_number"
            placeholder="请选择节点编号"
            style="width: 100%"
          >
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
            <el-option label="3" value="3" />
            <el-option label="4" value="4" />
            <el-option label="5" value="5" />
            <el-option label="6" value="6" />
            <el-option label="7" value="7" />
            <el-option label="8" value="8" />
            <el-option label="9" value="9" />
            <el-option label="10" value="10" />
            <el-option label="11" value="11" />
            <el-option label="12" value="12" />
            <el-option label="13" value="13" />
            <el-option label="14" value="14" />
            <el-option label="15" value="15" />
            <el-option label="16" value="16" />
            <el-option label="17" value="17" />
            <el-option label="18" value="18" />
            <el-option label="19" value="19" />
            <el-option label="20" value="20" />
            <el-option label="21" value="21" />
            <el-option label="22" value="22" />
            <el-option label="23" value="23" />
            <el-option label="24" value="24" />
            <el-option label="25" value="25" />
            <el-option label="26" value="26" />
            <el-option label="27" value="27" />
            <el-option label="28" value="28" />
            <el-option label="29" value="29" />
            <el-option label="30" value="30" />
            <el-option label="31" value="31" />
            <el-option label="32" value="32" />
            <el-option label="33" value="33" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前碳势">
          <el-input
            v-model="registerParam.current_carbon_potential"
            placeholder="请输入当前碳势"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="regVisible = false">取 消</el-button>
        <el-button type="primary" @click="registered">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { login, register } from "@/api/head_index";
export default {
  props: {
    activeIndex: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      loginVisible: false,
      regVisible: false,
      loginDto: {
        u_id: "",
        u_pwd: "",
      },
      isLogin: localStorage.getItem("Token"),
      userDate: {
        name: localStorage.getItem("Name"),
      },
      registerParam: {
        u_id: "",
        u_pwd: "",
        u_name: "",
        u_sex: "",
        u_age: "",
        u_address: "",
        u_unit: "",
        u_email: "",
        u_number: "",
        node_number: "",
        current_carbon_potential: "",
      },
    };
  },
  methods: {
    clear() {
      this.registerParam = {
        u_id: "",
        u_pwd: "",
        u_name: "",
        u_sex: "",
        u_age: "",
        u_address: "",
        u_unit: "",
        u_email: "",
        u_number: "",
        node_number: "",
        current_carbon_potential: "",
      };
      this.regVisible = false;
    },
    handleCommand(command) {
      if (command === "3") {
        // 退出登录
        this.isLogin = false;
        localStorage.removeItem("Token");
        localStorage.removeItem("Name");
        this.$message.success("退出成功！");
      }
    },
    onSubmit() {
      if (!this.loginDto.u_id || !this.loginDto.u_pwd) {
        this.$message.error("账号或者密码为空，请填写。");
        return;
      }
      login(this.loginDto)
        .then((res) => {
          console.log(res);
          this.$message.success("登录成功！");
          localStorage.setItem("Token", res.data.token);
          localStorage.setItem("Name", res.data.u_name);
          //  当前用户名更新
          this.userDate.name = res.data.u_name;

          this.loginDto.u_id = "";
          this.loginDto.u_pwd = "";

          this.loginVisible = false;
          this.isLogin = true;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    registered() {
      if (
        this.registerParam.u_id == "" ||
        this.registerParam.u_pwd == "" ||
        this.registerParam.u_name == "" ||
        this.registerParam.u_sex == "" ||
        this.registerParam.u_age == "" ||
        this.registerParam.u_address == "" ||
        this.registerParam.u_unit == "" ||
        this.registerParam.u_email == "" ||
        this.registerParam.u_number == "" ||
        this.registerParam.node_number == "" ||
        this.registerParam.current_carbon_potential == ""
      ) {
        this.$message.error("数据请填写完整！");
        return;
      }
      var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
      if (
        !regPos.test(this.registerParam.u_age) ||
        !/^([0]|[1-9][0-9]*)$/.test(this.registerParam.u_age)
      ) {
        this.$message.error("年龄必须为正数");
        return;
      }
      if (this.registerParam.u_age > 150) {
        this.$message.error("年龄不能超过150");
        return;
      }
      if (
        !/^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/.test(
          this.registerParam.u_number
        )
      ) {
        this.$message.error("手机号格式不正确");
        return;
      }
      if (!regPos.test(this.registerParam.current_carbon_potential)) {
        this.$message.error("碳势必须为数字");
        return;
      }

      register(this.registerParam).then((res) => {
        this.regVisible = false;
        this.$message.success("注册成功！");
        this.registerParam = {
          u_id: "",
          u_pwd: "",
          u_name: "",
          u_sex: "",
          u_age: "",
          u_address: "",
          u_unit: "",
          u_email: "",
          u_number: "",
          node_number: "",
          current_carbon_potential: "",
        };
      });
    },
    handleClose(done) {},
  },
};
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-menu--horizontal > .el-menu-item.is-active:hover,
.el-menu--horizontal > .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.headerbtnbox img{
width: 37px;
 height: 37px;
 margin-right: 10px;
 border-radius: 50px;
}
</style>
